import React, { useState, useEffect } from "react";
import { View, StyleSheet, Dimensions, Text, TextInput } from "react-native";
import { useSelector, useDispatch } from "react-redux";
import IconNavBar from '@/components/IconNavBar'
import Loading from "@/components/LoadingModal";
import { sectokenNetWorkFeeProps } from '@/config/navigatorProps'
import { getTotalFee } from '@/utils/safe-transfer'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const SectokenNetWorkFee = (props) => {

    const dispatch = useDispatch();
    const feeData = useSelector((state) => state.sectokenSafeReducer.feeData);
    const [nonce, setNonce] = useState()
    const [loadingVisible, setLoadingVisible] = useState(false)
    const [gasLimit, setGasLimit] = useState()
    const [maxPriorityFeePerGas, setMaxPriorityFeePerGas] = useState()
    const [maxFeePerGas, setMaxFeePerGas] = useState()

    useEffect(() => {
        if (feeData) {
            setNonce(feeData.nonce)
            setGasLimit(feeData.gasConsume)
            setMaxPriorityFeePerGas(feeData.feeData['maxPriorityFeePerGas'])
            setMaxFeePerGas(feeData.feeData['maxFeePerGas'])
        }
    }, [feeData])

    const handlePressLeft = () => {
        props.navigation.goBack()
    }

    const handlePressRightTitle = () => {
        setLoadingVisible(true)
        let totalFee = getTotalFee(maxFeePerGas, gasLimit)
        let feeData = {
            nonce,
            feeData: {
                maxPriorityFeePerGas,
                maxFeePerGas
            },
            gasConsume: gasLimit,
            totalFee
        }
        dispatch({ type: "setFeeData", value: feeData });
        setLoadingVisible(false)
        props.navigation.goBack()
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} {...sectokenNetWorkFeeProps} handlePressLeft={handlePressLeft} handlePressRightTitle={handlePressRightTitle} />
            <View style={styles.bodyContent}>
                <Text style={styles.title2}>Nonce</Text>
                <TextInput
                    style={[styles.title1, styles.inputContent]}
                    onChangeText={text => setNonce(text)}
                    value={nonce && nonce.toString()}
                    keyboardType='numeric' />
                <Text style={styles.title2}>Gas limit</Text>
                <TextInput
                    style={[styles.title1, styles.inputContent]}
                    onChangeText={text => setGasLimit(text)}
                    value={gasLimit && gasLimit.toString()}
                    keyboardType='numeric' />
                <Text style={styles.title2}>Max priority fee per gas (GWEI)</Text>
                <TextInput
                    style={[styles.title1, styles.inputContent]}
                    onChangeText={text => setMaxPriorityFeePerGas(text)}
                    value={maxPriorityFeePerGas && maxPriorityFeePerGas.toString()}
                    keyboardType='numeric' />
                <Text style={styles.title2}>Max fee per gas (GWEI)</Text>
                <TextInput
                    style={[styles.title1, styles.inputContent]}
                    onChangeText={text => setMaxFeePerGas(text)}
                    value={maxFeePerGas && maxFeePerGas.toString()}
                    keyboardType='numeric' />
            </View>
            {loadingVisible && <Loading visible={loadingVisible} />}
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F7F7F7'
    },
    bodyContent: {
        flex: 1,
        marginTop: 10 * ratio
    },
    inputContent: {
        width: 330 * ratio,
        height: 46 * ratio,
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#979797',
        marginLeft: 15 * ratio,
        marginTop: 13 * ratio
    },
    title1: {
        fontSize: 18,
        fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
        fontWeight: '400',
        color: '#2C2C2C',
        lineHeight: 27,
        paddingLeft: 10 * ratio
    },
    title2: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 24,
        marginLeft: 15 * ratio,
        marginTop: 18 * ratio
    }
})
export default SectokenNetWorkFee